<template>
	<s-layout title="我的团队" :bg-style="{
		color: '#FFFFFF'
	}">
		<view class="ss-safe-bottom" v-if="state.data">
			<view class="user ss-flex justify-between align-center ss-p-x-20">
				<view class="user-left ss-flex justify-center align-center">
					<image class="avatar ss-m-r-20" :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill"></image>
					<view class="user-left-text ss-flex flex-column justify-between align-start">
						<view class="name">{{ userInfo.nickname }}</view>
						<view class="store">我的小店</view>
					</view>
				</view>
				<image class="user-right"
					src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250408/75afb83b9e9b3ec5d3e313e29f3fcf83.png"
					v-if="state.level === 'gold'"></image>
				<image class="user-right"
					src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250408/bf04923b33c15b9483999d5ca079893f.png"
					v-if="state.level === 'diamond'"></image>
				<image class="user-right"
					src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250408/c43f9416612f9968211e079c1abcbc5b.png"
					v-if="state.level === 'starshine'"></image>
				<image class="user-right"
					src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250408/b663a9567beb34aa7e469beec7c1ce72.png"
					v-if="state.level === 'honor'"></image>
			</view>
			<view class="store-total ss-p-y-20 ss-p-x-30">
				<view class="total-num ss-m-b-45">团队总店铺：{{ state.data.count || 0 }}个</view>
				<view class="total-item ss-flex justify-between align-center">
					<view>黄金店铺</view>
					<view>{{ state.data.gold.goldTotal || 0 }}个</view>
				</view>
				<view class="total-item ss-flex justify-between align-center">
					<view>钻石店铺</view>
					<view>{{ state.data.diamond.diamondTotal || 0 }}个</view>
				</view>
				<view class="total-item ss-flex justify-between align-center">
					<view>星耀店铺</view>
					<view>{{ state.data.starshine.starshineTotal || 0 }}个</view>
				</view>
				<view class="total-item ss-flex justify-between align-center">
					<view>荣耀店铺</view>
					<view>{{ state.data.honor.honorTotal || 0 }}个</view>
				</view>
			</view>
			<view class="level ss-flex align-start ss-p-y-25 ss-p-x-40" v-if="state.data.gold.list.length >= 1">
				<view class="level-name ss-flex justify-center align-center ss-m-r-20">
					<text>黄金店铺</text>
				</view>
				<view class="ss-flex-1">
					<view class="w-100 ss-flex">
						<view class="level-item ss-line-1 z ss-m-r-25">Z({{ state.data.gold.goldDirectPush }})人</view>
						<view class="level-item ss-line-1 j ss-m-r-25">J({{ state.data.gold.goldIndirect }})人</view>
						<view class="level-item ss-line-1 sum">总：({{ state.data.gold.goldTotal }})人</view>
					</view>
					<view class="w-100 level-list ss-m-t-20">
						<view class="level-user ss-flex flex-column justify-center align-center"
							v-for="(item, index) in state.data.gold.list" :key="index" @click="chat(item)">
							<view class="level-user-avatar ss-flex justify-center align-center">
								<image class="level-user-avatar-image" :src="sheep.$url.cdn(item.avatar)"
									mode="aspectFill"></image>
								<view class="level-type" :class="[item.tag === 'Z' ? 'z' : 'j']">{{ item.tag }}</view>
							</view>
							<view class="level-user-name ss-line-1 ss-m-t-15">{{ item.nickname }}</view>
						</view>
						<view class="level-user ss-flex flex-column justify-center align-center" @click="more('gold')"
							v-if="state.data.gold.list.length < state.data.gold.total">
							<view class="level-user-avatar ss-flex justify-center align-center">
								···
							</view>
							<view class="level-user-name ss-line-1 ss-m-t-15">更多</view>
						</view>
					</view>
				</view>
			</view>
			<view class="level ss-flex align-start ss-p-y-25 ss-p-x-40" v-if="state.data.diamond.list.length >= 1">
				<view class="level-name ss-flex justify-center align-center ss-m-r-20 blue">
					<text>钻石店铺</text>
				</view>
				<view class="ss-flex-1">
					<view class="w-100 ss-flex">
						<view class="level-item ss-line-1 z ss-m-r-25">Z({{ state.data.diamond.diamondDirectPush }})人
						</view>
						<view class="level-item ss-line-1 j ss-m-r-25">J({{ state.data.diamond.diamondIndirect }})人
						</view>
						<view class="level-item ss-line-1 sum">总：({{ state.data.diamond.diamondTotal }})人</view>
					</view>
					<view class="w-100 level-list ss-m-t-20">
						<view class="level-user ss-flex flex-column justify-center align-center"
							v-for="(item, index) in state.data.diamond.list" :key="index" @click="chat(item)">
							<view class="level-user-avatar ss-flex justify-center align-center">
								<image class="level-user-avatar-image" :src="sheep.$url.cdn(item.avatar)"
									mode="aspectFill"></image>
								<view class="level-type" :class="[item.tag === 'Z' ? 'z' : 'j']">{{ item.tag }}</view>
							</view>
							<view class="level-user-name ss-line-1 ss-m-t-15">{{ item.nickname }}</view>
						</view>
						<view class="level-user ss-flex flex-column justify-center align-center"
							@click="more('diamond')" v-if="state.data.diamond.list.length < state.data.diamond.total">
							<view class="level-user-avatar ss-flex justify-center align-center">
								···
							</view>
							<view class="level-user-name ss-line-1 ss-m-t-15">更多</view>
						</view>
					</view>
				</view>
			</view>
			<view class="level ss-flex align-start ss-p-y-25 ss-p-x-40" v-if="state.data.starshine.list.length >= 1">
				<view class="level-name ss-flex justify-center align-center ss-m-r-20 blue">
					<text>星耀店铺</text>
				</view>
				<view class="ss-flex-1">
					<view class="w-100 ss-flex">
						<view class="level-item ss-line-1 z ss-m-r-25">Z({{ state.data.starshine.starshineDirectPush }})人
						</view>
						<view class="level-item ss-line-1 j ss-m-r-25">J({{ state.data.starshine.starshineIndirect }})人
						</view>
						<view class="level-item ss-line-1 sum">总：({{ state.data.starshine.starshineTotal }})人</view>
					</view>
					<view class="w-100 level-list ss-m-t-20">
						<view class="level-user ss-flex flex-column justify-center align-center"
							v-for="(item, index) in state.data.starshine.list" :key="index" @click="chat(item)">
							<view class="level-user-avatar ss-flex justify-center align-center">
								<image class="level-user-avatar-image" :src="sheep.$url.cdn(item.avatar)"
									mode="aspectFill"></image>
								<view class="level-type" :class="[item.tag === 'Z' ? 'z' : 'j']">{{ item.tag }}</view>
							</view>
							<view class="level-user-name ss-line-1 ss-m-t-15">{{ item.nickname }}</view>
						</view>
						<view class="level-user ss-flex flex-column justify-center align-center"
							@click="more('starshine')"
							v-if="state.data.starshine.list.length < state.data.starshine.total">
							<view class="level-user-avatar ss-flex justify-center align-center">
								···
							</view>
							<view class="level-user-name ss-line-1 ss-m-t-15">更多</view>
						</view>
					</view>
				</view>
			</view>
			<view class="level ss-flex align-start ss-p-y-25 ss-p-x-40" v-if="state.data.honor.list.length >= 1">
				<view class="level-name ss-flex justify-center align-center ss-m-r-20 blue">
					<text>荣耀店铺</text>
				</view>
				<view class="ss-flex-1">
					<view class="w-100 ss-flex">
						<view class="level-item ss-line-1 z ss-m-r-25">Z({{ state.data.honor.honorDirectPush }})人</view>
						<view class="level-item ss-line-1 j ss-m-r-25">J({{ state.data.honor.honorIndirect }})人</view>
						<view class="level-item ss-line-1 sum">总：({{ state.data.honor.honorTotal }})人</view>
					</view>
					<view class="w-100 level-list ss-m-t-20">
						<view class="level-user ss-flex flex-column justify-center align-center"
							v-for="(item, index) in state.data.honor.list" :key="index" @click="chat(item)">
							<view class="level-user-avatar ss-flex justify-center align-center">
								<image class="level-user-avatar-image" :src="sheep.$url.cdn(item.avatar)"
									mode="aspectFill"></image>
								<view class="level-type" :class="[item.tag === 'Z' ? 'z' : 'j']">{{ item.tag }}</view>
							</view>
							<view class="level-user-name ss-line-1 ss-m-t-15">{{ item.nickname }}</view>
						</view>
						<view class="level-user ss-flex flex-column justify-center align-center" @click="more('honor')"
							v-if="state.data.honor.list.length < state.data.honor.total">
							<view class="level-user-avatar ss-flex justify-center align-center">
								···
							</view>
							<view class="level-user-name ss-line-1 ss-m-t-15">更多</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
import {
	computed,
	reactive
} from 'vue';
import {
	onLoad
} from '@dcloudio/uni-app';
import sheep from '@/sheep';

const userInfo = computed(() => sheep.$store('user').userInfo)

const state = reactive({
	params: {
		goldPage: 1,
		diamondPage: 1,
		starshinePage: 1,
		honorPage: 1,
		goldPageSize: 14,
		diamondPageSize: 14,
		starshinePageSize: 14,
		honorPageSize: 14
	},
	data: null,
	level: ''
})

onLoad(() => {
	getData()
	getMyLevel()
})

const chat = (item) => {
	let to = {
		aim: 'message',
		service: {
			mobile: item.mobile
		}
	}
	sheep.$router.go("/im/pages/web", {
		to: encodeURIComponent(JSON.stringify(to))
	})
}

const getMyLevel = async () => {
	const {
		error,
		data
	} = await sheep.$api.store.getOwnStoreInfo()
	if (error === 0) {
		state.level = data.grade
	}
}

const more = (type) => {
	if (type === 'gold') {
		state.params.goldPage++
	}
	if (type === 'diamond') {
		state.params.diamondPage++
	}
	if (type === 'starshine') {
		state.params.starshinePage++
	}
	if (type === 'honor') {
		state.params.honorPage++
	}
	getData(type)
}

const getData = async (type) => {
	const {
		error,
		data
	} = await sheep.$api.store.getMyTeam(state.params)
	if (error === 0) {
		if (type) {
			if (type === 'gold') {
				state.data.gold.list = state.data.gold.list.concat(data.gold.list)
			}
			if (type === 'diamond') {
				state.data.diamond.list = state.data.diamond.list.concat(data.diamond.list)
			}
			if (type === 'starshine') {
				state.data.starshine.list = state.data.starshine.list.concat(data.starshine.list)
			}
			if (type === 'honor') {
				state.data.honor.list = state.data.honor.list.concat(data.honor.list)
			}
		} else {
			state.data = data
		}
	}
}
</script>

<style scoped lang="scss">
view {
	box-sizing: border-box;
}

.user {
	width: 100%;

	.user-left {
		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.user-left-text {
			flex: 1;
			height: 100rpx;

			.name {
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}

			.store {
				font-size: 28rpx;
				font-weight: normal;
				color: #787878;
			}
		}
	}

	.user-right {
		width: 117rpx;
		height: 84rpx;
	}
}

.store-total {
	width: 729rpx;
	border-radius: 20rpx;
	background: #F4F4F4;
	margin: 35rpx auto 0;
	
	.total-num {
		font-size: 30rpx;
		font-weight: 500;
		color: #000000;
	}
	
	.total-item {
		font-size: 30rpx;
		font-weight: 500;
		color: #000000;
		margin-bottom: 20rpx;
	}
}

.level {
	width: 729rpx;
	border-radius: 20rpx;
	background: #F4F4F4;
	margin: 30rpx auto 0;
	overflow: hidden;

	.level-name {
		width: 34rpx;
		height: 165rpx;
		border-radius: 6rpx;
		background: #E3E3E3;
		font-size: 22rpx;
		font-weight: normal;
		color: #2C2C2C;
		text-align: center;
	}

	.level-item {
		display: inline-block;
		padding: 0 15rpx;
		height: 37rpx;
		border-radius: 4rpx;
		font-size: 26rpx;
		font-weight: 500;
		line-height: 37rpx;
		text-align: center;
	}

	.level-list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 25rpx;

		.level-user {
			.level-user-avatar {
				width: 75rpx;
				height: 75rpx;
				border: 5rpx solid #FFFFFF;
				border-radius: 50%;
				position: relative;
				box-shadow: 0 0 15rpx 5rpx rgba(0, 0, 0, 0.2);
				font-size: 28rpx;
				font-weight: 900;
				color: #000000;


				.level-user-avatar-image {
					width: 65rpx;
					height: 65rpx;
					border-radius: 50%;
				}

				.level-type {
					position: absolute;
					left: 2rpx;
					bottom: -10rpx;
					width: 62rpx;
					height: 22rpx;
					border-radius: 4rpx;
					font-size: 18rpx;
					font-weight: 500;
					line-height: 22rpx;
					text-align: center;
				}
			}

			.level-user-name {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #0A0A0A;
			}
		}
	}


}

.z {
	color: #FFFFFF;
	background-color: #555CEA;
}

.j {
	color: #E6E6E6;
	background-color: #FD4B83;
}

.sum {
	color: #FFFFFF;
	background-color: #3D3D3D;
}

.blue {
	color: #127FD8 !important;
	background-color: #CFEAFF !important;
}
</style>